<script setup>
import Aside from "@/components/Aside.vue";
import { storeToRefs } from "pinia";
import {
  Fold
} from "@element-plus/icons-vue";
import { useCounterStore } from "../stores/counter";
const { isCollapse } = storeToRefs(useCounterStore());
const { increment } = useCounterStore()
const edit=()=>{
    console.log(1);
    increment()
}
</script>
<template>
  <div class="common-layout">
    <div class="left"><Aside /></div>
    <el-container>
   
      <el-container>
        <el-header> 
    <el-icon @click="edit"  size="24"><Fold /></el-icon>
  </el-header>
        <el-main>Main
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style lang="scss" scoped>
.common-layout {
    display: flex;
  height: 100%;
  width: 100%;
  .el-container{
    height: 100%;
  }
  .el-header{
    display: flex;
    align-items: center;
  }
 
}
.left {
    height: 100%;
    // max-width: 65px;
    background-color: #001529;
  }
  .el-header{
    box-shadow: 0 0 10px 0 rgba(177, 176, 176, 0.5);
  }
</style>>
